
Frontend Forever App
We have a mobile app for you to download and use. And you can unlock many features in the app.
Get it nowIntall Later
We have a mobile app for you to download and use. And you can unlock many features in the app.
Get it nowxxxxxxxxxx
<div class="loader">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<script src='https://assets.codepen.io/1948355/twitterButton-2.1.0.js'></script>
xxxxxxxxxx
*, *::before, *::after {
padding: 0;
margin: 0 auto;
box-sizing: border-box;
}
body {
background-color: #000;
color: #fff;
min-height: 100vh;
display: grid;
place-items: center;
overflow: hidden;
}
.loader {
position: absolute;
filter: blur(4px) contrast(4);
}
.loader::before {
content: "";
position: absolute;
inset: -200px;
background-color: #000;
}
.loader div {
position: absolute;
inset: -4px;
background-color: #fff;
border-radius: 50%;
transform: rotate(var(--rz, 0)) translateY(120px);
-webkit-animation: mid 3s var(--midDelay, 0s) infinite linear;
animation: mid 3s var(--midDelay, 0s) infinite linear;
}
@-webkit-keyframes mid {
0% {
background-color: white;
}
20%, 100% {
background-color: transparent;
}
}
@keyframes mid {
0% {
background-color: white;
}
20%, 100% {
background-color: transparent;
}
}
.loader div::before, .loader div::after {
content: "";
position: absolute;
inset: -4px;
border-radius: 50%;
background-color: hsl(var(--_hue, var(--hue)), 100%, 50%);
-webkit-animation: move 3s var(--_delay, var(--delay)) infinite ease-in-out;
animation: move 3s var(--_delay, var(--delay)) infinite ease-in-out;
}
@-webkit-keyframes move {
0%, 100% {
transform: translateY(var(--_ty, var(--ty))) scale(0);
}
50% {
transform: translateY(var(--_ty, var(--ty))) scale(1);
}
}
@keyframes move {
0%, 100% {
transform: translateY(var(--_ty, var(--ty))) scale(0);
}
50% {
transform: translateY(var(--_ty, var(--ty))) scale(1);
}
}
.loader div::after {
--_ty: calc(var(--ty) * -1);
--_hue: calc(var(--hue) + 180);
--_delay: calc(var(--delay) - 0.3s);
}
.loader div:nth-child(1) {
--rz: 0deg;
--delay: 0s;
--midDelay: -3s;
--ty: 0%;
--hue: 0;
}
.loader div:nth-child(2) {
--rz: 3deg;
--delay: -0.075s;
--midDelay: -2.975s;
--ty: 35.8367949545%;
--hue: 3;
}
.loader div:nth-child(3) {
--rz: 6deg;
--delay: -0.15s;
--midDelay: -2.95s;
--ty: 66.9130606359%;
--hue: 6;
}
.loader div:nth-child(4) {
--rz: 9deg;
--delay: -0.225s;
--midDelay: -2.925s;
--ty: 89.1006524188%;
--hue: 9;
}
.loader div:nth-child(5) {
--rz: 12deg;
--delay: -0.3s;
--midDelay: -2.9s;
--ty: 99.4521895368%;
--hue: 12;
}
.loader div:nth-child(6) {
--rz: 15deg;
--delay: -0.375s;
--midDelay: -2.875s;
--ty: 96.5925826289%;
--hue: 15;
}
.loader div:nth-child(7) {
--rz: 18deg;
--delay: -0.45s;
--midDelay: -2.85s;
--ty: 80.9016994375%;
--hue: 18;
}
.loader div:nth-child(8) {
--rz: 21deg;
--delay: -0.525s;
--midDelay: -2.825s;
--ty: 54.4639035015%;
--hue: 21;
}
.loader div:nth-child(9) {
--rz: 24deg;
--delay: -0.6s;
--midDelay: -2.8s;
--ty: 20.7911690818%;
--hue: 24;
}
.loader div:nth-child(10) {
--rz: 27deg;
--delay: -0.675s;
--midDelay: -2.775s;
--ty: -15.643446504%;
--hue: 27;
}
.loader div:nth-child(11) {
--rz: 30deg;
--delay: -0.75s;
--midDelay: -2.75s;
--ty: -50%;
--hue: 30;
}
.loader div:nth-child(12) {
--rz: 33deg;
--delay: -0.825s;
--midDelay: -2.725s;
--ty: -77.7145961457%;
--hue: 33;
}
.loader div:nth-child(13) {
--rz: 36deg;
--delay: -0.9s;
--midDelay: -2.7s;
--ty: -95.1056516295%;
--hue: 36;
}
.loader div:nth-child(14) {
--rz: 39deg;
--delay: -0.975s;
--midDelay: -2.675s;
--ty: -99.8629534755%;
--hue: 39;
}
.loader div:nth-child(15) {
--rz: 42deg;
--delay: -1.05s;
--midDelay: -2.65s;
--ty: -91.3545457643%;
--hue: 42;
}
.loader div:nth-child(16) {
--rz: 45deg;
--delay: -1.125s;
--midDelay: -2.625s;
--ty: -70.7106781187%;
--hue: 45;
}
.loader div:nth-child(17) {
--rz: 48deg;
--delay: -1.2s;
--midDelay: -2.6s;
--ty: -40.6736643076%;
--hue: 48;
}
.loader div:nth-child(18) {
--rz: 51deg;
--delay: -1.275s;
--midDelay: -2.575s;
--ty: -5.2335956243%;
--hue: 51;
}
.loader div:nth-child(19) {
--rz: 54deg;
--delay: -1.35s;
--midDelay: -2.55s;
--ty: 30.9016994375%;
--hue: 54;
}
.loader div:nth-child(20) {
--rz: 57deg;
--delay: -1.425s;
--midDelay: -2.525s;
--ty: 62.932039105%;
--hue: 57;
}
.loader div:nth-child(21) {
--rz: 60deg;
--delay: -1.5s;
--midDelay: -2.5s;
--ty: 86.6025403784%;
--hue: 60;
}
.loader div:nth-child(22) {
--rz: 63deg;
--delay: -1.575s;
--midDelay: -2.475s;
--ty: 98.7688340595%;
--hue: 63;
}
.loader div:nth-child(23) {
--rz: 66deg;
--delay: -1.65s;
--midDelay: -2.45s;
--ty: 97.8147600734%;
--hue: 66;
}
.loader div:nth-child(24) {
--rz: 69deg;
--delay: -1.725s;
--midDelay: -2.425s;
--ty: 83.8670567945%;
--hue: 69;
}
.loader div:nth-child(25) {
--rz: 72deg;
--delay: -1.8s;
--midDelay: -2.4s;
--ty: 58.7785252292%;
--hue: 72;
}
.loader div:nth-child(26) {
--rz: 75deg;
--delay: -1.875s;
--midDelay: -2.375s;
--ty: 25.8819045103%;
--hue: 75;
}
.loader div:nth-child(27) {
--rz: 78deg;
--delay: -1.95s;
--midDelay: -2.35s;
--ty: -10.4528463268%;
--hue: 78;
}
.loader div:nth-child(28) {
--rz: 81deg;
--delay: -2.025s;
--midDelay: -2.325s;
--ty: -45.399049974%;
--hue: 81;
}
.loader div:nth-child(29) {
--rz: 84deg;
--delay: -2.1s;
--midDelay: -2.3s;
--ty: -74.3144825477%;
--hue: 84;
}
.loader div:nth-child(30) {
--rz: 87deg;
--delay: -2.175s;
--midDelay: -2.275s;
--ty: -93.3580426497%;
--hue: 87;
}
.loader div:nth-child(31) {
--rz: 90deg;
--delay: -2.25s;
--midDelay: -2.25s;
--ty: -100%;
--hue: 90;
}
.loader div:nth-child(32) {
--rz: 93deg;
--delay: -2.325s;
--midDelay: -2.225s;
--ty: -93.3580426497%;
--hue: 93;
}
.loader div:nth-child(33) {
--rz: 96deg;
--delay: -2.4s;
--midDelay: -2.2s;
--ty: -74.3144825477%;
--hue: 96;
}
.loader div:nth-child(34) {
--rz: 99deg;
--delay: -2.475s;
--midDelay: -2.175s;
--ty: -45.399049974%;
--hue: 99;
}
.loader div:nth-child(35) {
--rz: 102deg;
--delay: -2.55s;
--midDelay: -2.15s;
--ty: -10.4528463268%;
--hue: 102;
}
.loader div:nth-child(36) {
--rz: 105deg;
--delay: -2.625s;
--midDelay: -2.125s;
--ty: 25.8819045103%;
--hue: 105;
}
.loader div:nth-child(37) {
--rz: 108deg;
--delay: -2.7s;
--midDelay: -2.1s;
--ty: 58.7785252292%;
--hue: 108;
}
.loader div:nth-child(38) {
--rz: 111deg;
--delay: -2.775s;
--midDelay: -2.075s;
--ty: 83.8670567945%;
--hue: 111;
}
.loader div:nth-child(39) {
--rz: 114deg;
--delay: -2.85s;
--midDelay: -2.05s;
--ty: 97.8147600734%;
--hue: 114;
}
.loader div:nth-child(40) {
--rz: 117deg;
--delay: -2.925s;
--midDelay: -2.025s;
--ty: 98.7688340595%;
--hue: 117;
}
.loader div:nth-child(41) {
--rz: 120deg;
--delay: -3s;
--midDelay: -2s;
--ty: 86.6025403784%;
--hue: 120;
}
.loader div:nth-child(42) {
--rz: 123deg;
--delay: -3.075s;
--midDelay: -1.975s;
--ty: 62.932039105%;
--hue: 123;
}
.loader div:nth-child(43) {
--rz: 126deg;
--delay: -3.15s;
--midDelay: -1.95s;
--ty: 30.9016994375%;
--hue: 126;
}
.loader div:nth-child(44) {
--rz: 129deg;
--delay: -3.225s;
--midDelay: -1.925s;
--ty: -5.2335956243%;
--hue: 129;
}
.loader div:nth-child(45) {
--rz: 132deg;
--delay: -3.3s;
--midDelay: -1.9s;
--ty: -40.6736643076%;
--hue: 132;
}
.loader div:nth-child(46) {
--rz: 135deg;
--delay: -3.375s;
--midDelay: -1.875s;
--ty: -70.7106781187%;
--hue: 135;
}
.loader div:nth-child(47) {
--rz: 138deg;
--delay: -3.45s;
--midDelay: -1.85s;
--ty: -91.3545457643%;
--hue: 138;
}
.loader div:nth-child(48) {
--rz: 141deg;
--delay: -3.525s;
--midDelay: -1.825s;
--ty: -99.8629534755%;
--hue: 141;
}
.loader div:nth-child(49) {
--rz: 144deg;
--delay: -3.6s;
--midDelay: -1.8s;
--ty: -95.1056516295%;
--hue: 144;
}
.loader div:nth-child(50) {
--rz: 147deg;
--delay: -3.675s;
--midDelay: -1.775s;
--ty: -77.7145961457%;
--hue: 147;
}
.loader div:nth-child(51) {
--rz: 150deg;
--delay: -3.75s;
--midDelay: -1.75s;
--ty: -50%;
--hue: 150;
}
.loader div:nth-child(52) {
--rz: 153deg;
--delay: -3.825s;
--midDelay: -1.725s;
--ty: -15.643446504%;
--hue: 153;
}
.loader div:nth-child(53) {
--rz: 156deg;
--delay: -3.9s;
--midDelay: -1.7s;
--ty: 20.7911690818%;
--hue: 156;
}
.loader div:nth-child(54) {
--rz: 159deg;
--delay: -3.975s;
--midDelay: -1.675s;
--ty: 54.4639035015%;
--hue: 159;
}
.loader div:nth-child(55) {
--rz: 162deg;
--delay: -4.05s;
--midDelay: -1.65s;
--ty: 80.9016994375%;
--hue: 162;
}
.loader div:nth-child(56) {
--rz: 165deg;
--delay: -4.125s;
--midDelay: -1.625s;
--ty: 96.5925826289%;
--hue: 165;
}
.loader div:nth-child(57) {
--rz: 168deg;
--delay: -4.2s;
--midDelay: -1.6s;
--ty: 99.4521895368%;
--hue: 168;
}
.loader div:nth-child(58) {
--rz: 171deg;
--delay: -4.275s;
--midDelay: -1.575s;
--ty: 89.1006524188%;
--hue: 171;
}
.loader div:nth-child(59) {
--rz: 174deg;
--delay: -4.35s;
--midDelay: -1.55s;
--ty: 66.9130606359%;
--hue: 174;
}
.loader div:nth-child(60) {
--rz: 177deg;
--delay: -4.425s;
--midDelay: -1.525s;
--ty: 35.8367949545%;
--hue: 177;
}
.loader div:nth-child(61) {
--rz: 180deg;
--delay: -4.5s;
--midDelay: -1.5s;
--ty: 0%;
--hue: 180;
}
.loader div:nth-child(62) {
--rz: 183deg;
--delay: -4.575s;
--midDelay: -1.475s;
--ty: -35.8367949545%;
--hue: 183;
}
.loader div:nth-child(63) {
--rz: 186deg;
--delay: -4.65s;
--midDelay: -1.45s;
--ty: -66.9130606359%;
--hue: 186;
}
.loader div:nth-child(64) {
--rz: 189deg;
--delay: -4.725s;
--midDelay: -1.425s;
--ty: -89.1006524188%;
--hue: 189;
}
.loader div:nth-child(65) {
--rz: 192deg;
--delay: -4.8s;
--midDelay: -1.4s;
--ty: -99.4521895368%;
--hue: 192;
}
.loader div:nth-child(66) {
--rz: 195deg;
--delay: -4.875s;
--midDelay: -1.375s;
--ty: -96.5925826289%;
--hue: 195;
}
.loader div:nth-child(67) {
--rz: 198deg;
--delay: -4.95s;
--midDelay: -1.35s;
--ty: -80.9016994375%;
--hue: 198;
}
.loader div:nth-child(68) {
--rz: 201deg;
--delay: -5.025s;
--midDelay: -1.325s;
--ty: -54.4639035015%;
--hue: 201;
}
.loader div:nth-child(69) {
--rz: 204deg;
--delay: -5.1s;
--midDelay: -1.3s;
--ty: -20.7911690818%;
--hue: 204;
}
.loader div:nth-child(70) {
--rz: 207deg;
--delay: -5.175s;
--midDelay: -1.275s;
--ty: 15.643446504%;
--hue: 207;
}
.loader div:nth-child(71) {
--rz: 210deg;
--delay: -5.25s;
--midDelay: -1.25s;
--ty: 50%;
--hue: 210;
}
.loader div:nth-child(72) {
--rz: 213deg;
--delay: -5.325s;
--midDelay: -1.225s;
--ty: 77.7145961457%;
--hue: 213;
}
.loader div:nth-child(73) {
--rz: 216deg;
--delay: -5.4s;
--midDelay: -1.2s;
--ty: 95.1056516295%;
--hue: 216;
}
.loader div:nth-child(74) {
--rz: 219deg;
--delay: -5.475s;
--midDelay: -1.175s;
--ty: 99.8629534755%;
--hue: 219;
}
.loader div:nth-child(75) {
--rz: 222deg;
--delay: -5.55s;
--midDelay: -1.15s;
--ty: 91.3545457643%;
--hue: 222;
}
.loader div:nth-child(76) {
--rz: 225deg;
--delay: -5.625s;
--midDelay: -1.125s;
--ty: 70.7106781187%;
--hue: 225;
}
.loader div:nth-child(77) {
--rz: 228deg;
--delay: -5.7s;
--midDelay: -1.1s;
--ty: 40.6736643076%;
--hue: 228;
}
.loader div:nth-child(78) {
--rz: 231deg;
--delay: -5.775s;
--midDelay: -1.075s;
--ty: 5.2335956243%;
--hue: 231;
}
.loader div:nth-child(79) {
--rz: 234deg;
--delay: -5.85s;
--midDelay: -1.05s;
--ty: -30.9016994375%;
--hue: 234;
}
.loader div:nth-child(80) {
--rz: 237deg;
--delay: -5.925s;
--midDelay: -1.025s;
--ty: -62.932039105%;
--hue: 237;
}
.loader div:nth-child(81) {
--rz: 240deg;
--delay: -6s;
--midDelay: -1s;
--ty: -86.6025403784%;
--hue: 240;
}
.loader div:nth-child(82) {
--rz: 243deg;
--delay: -6.075s;
--midDelay: -0.975s;
--ty: -98.7688340595%;
--hue: 243;
}
.loader div:nth-child(83) {
--rz: 246deg;
--delay: -6.15s;
--midDelay: -0.95s;
--ty: -97.8147600734%;
--hue: 246;
}
.loader div:nth-child(84) {
--rz: 249deg;
--delay: -6.225s;
--midDelay: -0.925s;
--ty: -83.8670567945%;
--hue: 249;
}
.loader div:nth-child(85) {
--rz: 252deg;
--delay: -6.3s;
--midDelay: -0.9s;
--ty: -58.7785252292%;
--hue: 252;
}
.loader div:nth-child(86) {
--rz: 255deg;
--delay: -6.375s;
--midDelay: -0.875s;
--ty: -25.8819045103%;
--hue: 255;
}
.loader div:nth-child(87) {
--rz: 258deg;
--delay: -6.45s;
--midDelay: -0.85s;
--ty: 10.4528463268%;
--hue: 258;
}
.loader div:nth-child(88) {
--rz: 261deg;
--delay: -6.525s;
--midDelay: -0.825s;
--ty: 45.399049974%;
--hue: 261;
}
.loader div:nth-child(89) {
--rz: 264deg;
--delay: -6.6s;
--midDelay: -0.8s;
--ty: 74.3144825477%;
--hue: 264;
}
.loader div:nth-child(90) {
--rz: 267deg;
--delay: -6.675s;
--midDelay: -0.775s;
--ty: 93.3580426497%;
--hue: 267;
}
.loader div:nth-child(91) {
--rz: 270deg;
--delay: -6.75s;
--midDelay: -0.75s;
--ty: 100%;
--hue: 270;
}
.loader div:nth-child(92) {
--rz: 273deg;
--delay: -6.825s;
--midDelay: -0.725s;
--ty: 93.3580426497%;
--hue: 273;
}
.loader div:nth-child(93) {
--rz: 276deg;
--delay: -6.9s;
--midDelay: -0.7s;
--ty: 74.3144825477%;
--hue: 276;
}
.loader div:nth-child(94) {
--rz: 279deg;
--delay: -6.975s;
--midDelay: -0.675s;
--ty: 45.399049974%;
--hue: 279;
}
.loader div:nth-child(95) {
--rz: 282deg;
--delay: -7.05s;
--midDelay: -0.65s;
--ty: 10.4528463268%;
--hue: 282;
}
.loader div:nth-child(96) {
--rz: 285deg;
--delay: -7.125s;
--midDelay: -0.625s;
--ty: -25.8819045103%;
--hue: 285;
}
.loader div:nth-child(97) {
--rz: 288deg;
--delay: -7.2s;
--midDelay: -0.6s;
--ty: -58.7785252292%;
--hue: 288;
}
.loader div:nth-child(98) {
--rz: 291deg;
--delay: -7.275s;
--midDelay: -0.575s;
--ty: -83.8670567945%;
--hue: 291;
}
.loader div:nth-child(99) {
--rz: 294deg;
--delay: -7.35s;
--midDelay: -0.55s;
--ty: -97.8147600734%;
--hue: 294;
}
.loader div:nth-child(100) {
--rz: 297deg;
--delay: -7.425s;
--midDelay: -0.525s;
--ty: -98.7688340595%;
--hue: 297;
}
.loader div:nth-child(101) {
--rz: 300deg;
--delay: -7.5s;
--midDelay: -0.5s;
--ty: -86.6025403784%;
--hue: 300;
}
.loader div:nth-child(102) {
--rz: 303deg;
--delay: -7.575s;
--midDelay: -0.475s;
--ty: -62.932039105%;
--hue: 303;
}
.loader div:nth-child(103) {
--rz: 306deg;
--delay: -7.65s;
--midDelay: -0.45s;
--ty: -30.9016994375%;
--hue: 306;
}
.loader div:nth-child(104) {
--rz: 309deg;
--delay: -7.725s;
--midDelay: -0.425s;
--ty: 5.2335956243%;
--hue: 309;
}
.loader div:nth-child(105) {
--rz: 312deg;
--delay: -7.8s;
--midDelay: -0.4s;
--ty: 40.6736643076%;
--hue: 312;
}
.loader div:nth-child(106) {
--rz: 315deg;
--delay: -7.875s;
--midDelay: -0.375s;
--ty: 70.7106781187%;
--hue: 315;
}
.loader div:nth-child(107) {
--rz: 318deg;
--delay: -7.95s;
--midDelay: -0.35s;
--ty: 91.3545457643%;
--hue: 318;
}
.loader div:nth-child(108) {
--rz: 321deg;
--delay: -8.025s;
--midDelay: -0.325s;
--ty: 99.8629534755%;
--hue: 321;
}
.loader div:nth-child(109) {
--rz: 324deg;
--delay: -8.1s;
--midDelay: -0.3s;
--ty: 95.1056516295%;
--hue: 324;
}
.loader div:nth-child(110) {
--rz: 327deg;
--delay: -8.175s;
--midDelay: -0.275s;
--ty: 77.7145961457%;
--hue: 327;
}
.loader div:nth-child(111) {
--rz: 330deg;
--delay: -8.25s;
--midDelay: -0.25s;
--ty: 50%;
--hue: 330;
}
.loader div:nth-child(112) {
--rz: 333deg;
--delay: -8.325s;
--midDelay: -0.225s;
--ty: 15.643446504%;
--hue: 333;
}
.loader div:nth-child(113) {
--rz: 336deg;
--delay: -8.4s;
--midDelay: -0.2s;
--ty: -20.7911690818%;
--hue: 336;
}
.loader div:nth-child(114) {
--rz: 339deg;
--delay: -8.475s;
--midDelay: -0.175s;
--ty: -54.4639035015%;
--hue: 339;
}
.loader div:nth-child(115) {
--rz: 342deg;
--delay: -8.55s;
--midDelay: -0.15s;
--ty: -80.9016994375%;
--hue: 342;
}
.loader div:nth-child(116) {
--rz: 345deg;
--delay: -8.625s;
--midDelay: -0.125s;
--ty: -96.5925826289%;
--hue: 345;
}
.loader div:nth-child(117) {
--rz: 348deg;
--delay: -8.7s;
--midDelay: -0.1s;
--ty: -99.4521895368%;
--hue: 348;
}
.loader div:nth-child(118) {
--rz: 351deg;
--delay: -8.775s;
--midDelay: -0.075s;
--ty: -89.1006524188%;
--hue: 351;
}
.loader div:nth-child(119) {
--rz: 354deg;
--delay: -8.85s;
--midDelay: -0.05s;
--ty: -66.9130606359%;
--hue: 354;
}
.loader div:nth-child(120) {
--rz: 357deg;
--delay: -8.925s;
--midDelay: -0.025s;
--ty: -35.8367949545%;
--hue: 357;
}